<div class="card">
  <div class="card-header">
    <h1 class="card-title">{{'new-post'}} </h1>
    <p><small>all fields marked with star are required.</small></p>
  </div>
  <div class="card-block">
    <form id="form" name="form" class="form" ng-submit="$ctrl.save()" novalidate>
      <div class="form-group" ng-class="{'has-danger':form.title.$invalid && !form.title.$pristine}">
        <label class="form-control-label" for="title">{{'title'}} *</label>
        <input class="form-control" id="title" name="title" ng-model="$ctrl.data.title" required/>
        <div class="form-control-feedback" ng-messages="form.title.$error" ng-if="form.title.$invalid && !form.title.$pristine">
          <p ng-message="required">Post Title is required</p>
        </div>
      </div>
      <div class="form-group" ng-class="{'has-danger':form.content.$invalid && !form.content.$pristine}">
        <label class="form-control-label" for="content">{{'content'}} *</label>

        <textarea class="form-control" type="content" name="content" id="content" ng-model="$ctrl.data.content" rows="8" required ng-minlength="10">

        </textarea>
        <div class="form-control-feedback" ng-messages="form.content.$error" ng-if="form.content.$invalid && !form.content.$pristine">
          <p ng-message="required">Post Content is required</p>
          <p ng-message="minlength">At least 10 chars</p>
        </div>

      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-success btn-lg" ng-disabled="form.$invalid || form.$pending">  {{'save'}}
        </button>
      </div>
    </form>
  </div>
  <div class="card-footer">
    back to <a href="#" ui-sref="app.posts">{{'post-list'}}</a>
  </div>
</div>
